<!--建立考核模板首页 -->
<template>
  <div>
    <div style="height: 700px; margin: 25px" v-if="!createThree">
      <!-- 考核模板 -->
      <el-row class="createMUban" v-if="!looks">
        <el-button
          @click="addEquipment()"
          type="success"
          size="small"
        >+ 建立考核模板</el-button>
        <el-button
          @click="deleteSelected()"
          type="danger"
          size="small"
          :disabled="deletes"
        >批量删除</el-button>
      </el-row>
      <!-- 表格信息 -->
      <el-row v-if="!looks">
        <el-table
          :data="tableData"
          style="width: 100%; color: #333333;font-size: 14px"
          height="700"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
          @selection-change="handleSelectionChangeDepartment"
        >
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column fixed type="index" align="center" label="编号" width="80"></el-table-column>
          <el-table-column prop="name" align="center" label="考核模板"></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" width="120">
            <template v-slot="scope">
              <!-- {{ scope.row.status === 1 ? "是" : "否" }} -->
              <span v-if="scope.row.period === 1">月度</span>
              <span v-else-if="scope.row.period === 2">季度</span>
              <span v-else>年度</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessAdministratorUserName"
            align="center"
            label="考核管理员"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="assessorUsers"
            width="260"
            align="center"
            label="被考核人员"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="tags">
              <span
                v-for="(item,index) in tags.row.assessorUsers"
                :key="item.index"
              >{{item.name+' '}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="40">
            <template slot-scope="scope">
              <a @click="openPeopleList(scope.row)">
                <i>
                  <img src="@/assets/kaohePng/yanJing.png" />
                </i>
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" align="center" label="描述"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-dropdown style="margin-right:10px">
                <span class="el-dropdown-link" style="color: #35A06D; cursor:pointer;">查看</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native.prevent="lookRow(scope.row,1)">普通员工</el-dropdown-item>
                  <el-dropdown-item @click.native.prevent="lookRow(scope.row,2)">部门负责人</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                type="text"
                size="small"
                style="color: #3B95FF"
                @click="editMuBan(scope.row)"
              >编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small"
                style="color:#E86565"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row v-if="!createThree">
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
    </div>
    <el-dialog
      title="被考核人员"
      :visible.sync="centerDialogVisible"
      width="20%"
      style="border-radius:10px"
      center
    >
      <div style="width:100%;height:auto;border: 1px solid #E4E4E4;padding:2%;border-radius:5px">
        <template>
          <span v-for="(item,index) in this.nameList" :key="item.index">{{item+' '}}</span>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <oneStep v-if="createThree" @fatherMethod="fatherMethod" :ids="ids"></oneStep>

    <!-- 模板弹层查看与填写 -->

    <lookStep
      v-if="looks"
      @fatherMethod1="fatherMethod1"
      :assessUserTypes="assessUserTypes"
      :dataTypes="dataTypes"
    ></lookStep>
  </div>
</template>

  <script>
import {
  getKaoheList,
  deleteKaoheList,
  deleteAllKaoheList,
  jiaoYanMuBan,
  editMuaBan
} from "@/api2/kaohe"; //
import oneStep from "./components/oneStep.vue";
import lookStep from "./components/lookStep.vue";
import { userList } from "../../api/user";
export default {
  components: {
    oneStep: oneStep,
    lookStep: lookStep
  },
  data() {
    return {
      ids: "",
      deletes: true,
      multipleSelectionDepartment: [], // 用于保存选中的行
      gettime: "", //当前时间
      dataTypes: {},
      nameList: [],
      assessUserTypes: "",
      centerDialogVisible: false,
      looks: false,
      tableDatadialog: [], //表格数据
      createThree: false, //建立考核模板按钮的开关
      formLabelWidth: "78px", //label-width
      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      // tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      // }
      //表格数据数组
      tableData: [],
      userList: []
    };
  },
  mounted() {
    this.currentTime();
  },
  created() {
    this.getList(); //获取表格数据
  },
  methods: {
    // 用于保存选中的行
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
      if (val) {
        this.deletes = false;
      } else {
        this.deletes = true;
      }
    },
    // 批量删除
    deleteSelected() {
      this.$confirm("此操作将删除选中所有内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          let vals = this.multipleSelectionDepartment; //选中的值
          if (vals) {
            vals.map(item => {
              arr.push(item.id);
            });
          }
          const ids = { ids: arr.join() };
          deleteAllKaoheList(ids).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    openPeopleList(e) {
      console.log(e);
      let list = [];
      e.assessorUsers.forEach(item => {
        list.push(item.name);
      });

      this.nameList = list;
      console.log(this.nameList);
      this.centerDialogVisible = true;
    },
    fatherMethod() {
      this.getList();
      this.createThree = false;
    },
    fatherMethod1() {
      this.getList();
      this.looks = false;
    },
    // 建立考核模板按钮
    addEquipment() {
      this.createThree = true;
      this.ids = "";
    },
    // 表格内查看模板的点击事件
    lookRow(rows, index) {
      console.log(rows, index);
      this.dataTypes = { rows, index };
      this.looks = true;
    },
    //表格内模板编辑
    async editMuBan(row) {
      console.log(row);
      let id = row.id;
      const res = await jiaoYanMuBan(id);
      if (res.data == true) {
        this.$message({
          showClose: true,
          message: "该模板已经发起考核，无法编辑",
          type: "warning"
        });
        return;
      } else {
        this.ids = row.id;
        this.createThree = true;
      }
    },
    // 表格内删除按钮的点击事件
    deleteRow(rows) {
      const id = rows.id;
      console.log(rows.id.toString());
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          console.log(id);
          deleteKaoheList(id).then(res => {
            if (res.data === true) {
              this.$message.success("删除成功");
              const totalPage = Math.ceil((this.total - 1) / this.pageSize);
              // 记住删除最后一条数据时当前码是最后一页
              const pageNums =
                this.pageNum > totalPage ? totalPage : this.pageNum;
              // 重新记录当前页码
              this.pageNum = pageNums < 1 ? 1 : pageNums;
              //删除成功 回调列表接口
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //分页逻辑{
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    //获取表格数据
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getKaoheList(params)
        .then(res => {
          res.data.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          ); //这是升序，倒序的话翻过来
          this.tableData = res.data;
          this.total = res.total; //总条数
        })
        .catch(e => {
          console.log(e);
        });
    },
    //分页逻辑}

    // 弹窗部分调用
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
          ? new Date().getMonth() + 1
          : "0" + (new Date().getMonth() + 1);
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    currentTime() {
      setInterval(this.getTime, 1000);
    }
  }
};
</script>

  <style lang="scss" scoped>
.app-container {
  height: 100%;
  background-color: #f4f5fc;
}
.createMUban {
  display: inline-flex;
  align-items: center;
}
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep [data-v-125ad6e6] .el-step.is-horizontal .el-step__line {
  opacity: 0;
}

// .liucheng {
//   margin-top: 4%;
//   font-weight: 800;
//   font-size: 18px;
//   background-color: rgba(219, 215, 215, 0.5);
//   line-height: 5px;
//   height: 18px;
//   width: 90px;
//   border-radius: 5px 5px 0 0;
//   text-align: center;
//   margin-left: -15px;
// }
// ::v-deep .el-input--suffix .el-input__inner {
//   height: 18px;
//   font-size: 8px;
//   padding: 0px 0px 0px 5px;
//   border: none;
//   border-radius: 0;
//   background-color: rgba(219, 215, 215, 0.3);
// }
// ::v-deep .el-input__icon {
//   width: 14px;
// }
// ::v-deep .el-popper[x-placement^="bottom"] {
//   font-size: 8px;
//   height: 25px;
//   line-height: 5px;
// }
// ::v-deep .el-table td,
// .el-table th.is-leaf {
//   border: none;
// }
// ::v-deep .el-table--border th,
// .el-table__fixed-right-patch {
//   border: none;
// }
// ::v-deep .el-table::before {
//   background-color: #fff;
// }
// ::v-deep .el-table__fixed-right::before,
// .el-table__fixed::before {
//   background-color: #fff;
// }
// ::v-deep .el-table--border::after,
// .el-table--group::after {
//   background-color: #fff;
// }
</style>
